<template>
  <main>
    <div>
      <el-text>设备逻辑名称：</el-text>
      <el-input
        style="margin-top: 4px"
        maxlength="20"
        type="text"
        placeholder="请输入一个设备逻辑名"
        v-model="deviceName"
      ></el-input>
    </div>
    <div style="margin-top: 10px">
      <el-text>PLC 类型：</el-text>
      <el-select
        style="margin-top: 4px"
        placeholder="请选择设备类型"
        v-model="deviceType"
      >
        <el-option
          v-for="typeItem in deviceTypes"
          :key="typeItem"
          :value="typeItem"
          :label="typeItem"
        ></el-option>
      </el-select>
    </div>
    <div style="margin-top: 10px">
      <el-text>IP 地址 :</el-text>
      <el-input
        style="margin-top: 4px"
        v-model="ipAddress"
        maxlength="15"
        placeholder="请输入 IP 地址"
        type="text"
      ></el-input>
    </div>
    <div style="margin-top: 10px">
      <el-text>IP 端口：</el-text>
      <el-input
        style="margin-top: 4px"
        type="number"
        v-model="port"
        placeholder="请输入 IP 端口"
      ></el-input>
    </div>
  </main>
</template>

<script setup lang="ts">
import { useDeviceManagerStore } from "@/store/device/manager";

const deviceStore = useDeviceManagerStore();
const deviceTypes = deviceStore.deviceTypes;

const deviceName = defineModel("deviceName", {
  required: true,
});

const port = defineModel("port", {
  required: true,
});

const deviceType = defineModel("deviceType", {
  required: true,
});

const ipAddress = defineModel("ipAddress", {
  required: true,
});
</script>
